<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!Doctype html>
<html lang="en">

	<head>
		<title>爱学习交流平台个人中心</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet"> -->

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/bootstrap.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/animate.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/owl.carousel.min.css">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/flaticon/font/flaticon.css">
		<link rel="stylesheet" href="../WebTools/tapmodo-Jcrop/css/jquery.Jcrop.css" />
		<!-- Theme Style -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/style.css">
		<style type="text/css">
			.error {
				color: RED;
			}
			
			#img3 {
				width: 150px;
			}
			
			.success {
				color: green;
			}
			
			#text {
				border: 0.5px solid gainsboro;
			}
			
			#headAndAccount {
				border: 0.5px solid gainsboro;
			}
			
			.file {
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 4px;
				padding: 4px 12px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
				width: 92px;
			}
			
			.file input {
				position: absolute;
				font-size: 100px;
				right: 0;
				top: 0;
				opacity: 0;
			}
			
			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}
			
			.jrcopfit {
				margin: 0 auto;
			}
			
			.userImage {
				border-radius: 25px;
				width: 150px;
				height: 150px;
				/*border-radius: 50px;*/
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<header role="banner" style="position: fixed; z-index: 100000;">

			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#entireNavbar" aria-controls="entireNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
					<div class="collapse navbar-collapse navbar-light" id="entireNavbar">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link active" href="index2.jsp">首页</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="courses.jsp" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">课程</a>
								<div class="dropdown-menu" aria-labelledby="dropdown04" id="tabdiv">
								</div>

							</li>

							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于我们</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- END header -->

		<!--<section class="site-hero site-sm-hero overlay" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_2.jpg);">
			<div class="container">
				<div class="row align-items-center justify-content-center site-hero-sm-inner">
					
				</div>
			</div>
		</section>-->
		<div class=" container text-center p-4" id="section-first">
			<div class="element-animate">
				<h1>个人中心</h1>
				<p class="bcrumb">
					<a href="index2.jsp">首页</a> <span class="sep ion-android-arrow-dropright px-2"></span> <span class="current">个人中心</span></p>
			</div>
		</div>
		<!-- END section -->

		<div class="bg-light element-animate">
			<div class="container-sm">
				<div class="col-lg-12">
					<div class="block-20 ">
						<div class="text row" id="text">
							<!--<div class="tab-content" id="v-pills-tabContent">-->
							<!--<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>-->
							<div class="col-2">
								<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
									<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true" onclick="sendViewAccuountAjax()">个人管理</a>
									<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false" onclick="sendOrderViewAjax()">订单信息</a>
									<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">订单详情</a>
									<!--<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>-->
								</div>
							</div>

							<div id="headAndAccount" class="col-10">
								<div class="tab-content" id="v-pills-tabContent">
									<div class="tab-pane fade show active p-3" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
										<div class="container mt-2 mb-3 text-center">
											<h1>账户信息</h1>
										</div>
										<form id="subForm" method="post" enctype="multipart/form-data" class="row border-top p-4">
											<div id="headParent" class="col-6">
												<div class="container">
													<div class="container text-center">
														<div class="mx-auto userImage">
															<img src="images/2.png" id="img3" />
														</div>

													</div>
													<div class="container text-center">
														<a href="javascript:void(0)" class="btn file mt-3">修改头像 <input type="file" name="facePicture" id="file" accept="image/jpg,image/jpeg,image/png" onchange="setImagePriview()" disabled="disabled">
														</a>
													</div>
													<div id="cutImgPanel" class="text-center p-2" style="height: 450px;"></div>

												</div>
											</div>
											<div id="accountView" class="col-6">
												<input type="hidden" name="accountId" value="" id="accountId">
												<input type="hidden" name="pic-x" id="pic-x" value="0" />
												<input type="hidden" name="pic-y" id="pic-y" value="0" />
												<input type="hidden" name="destWidth" id="destWidth" value="0" />
												<input type="hidden" name="destHeight" id="destHeight" value="0" />
												<input type="hidden" name="finalWidth" id="finalWidth" value="0" />
												<input type="hidden" name="finalHeight" id="finalHeight" value="0" />
												<div class="form-group">
													<label id="phoneTip"> 手机号：</label>
													<input type="text" class="form-control" id="accountPhone" readonly="readonly" name="accountPhone" value="">
												</div>
												<div class="form-group">
													<label id="accountNameTip">用户名：</label>
													<input type="text" class="form-control" id="accountName" readonly="readonly" name="accountName">
												</div>

												<div class="form-group">
													<label id="emailTip">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
													<input type="text" class="form-control" id="accountEmail" readonly="readonly" name="accountEmail">
												</div>

												<div class="form-group">
													<label id="accountPswTip">新密码：</label>
													<input type="password" class="form-control" id="accountPsw" readonly="readonly" placeholder="更新密码，不填写视为保留原密码" name="accountPsw" autocomplete="new-password" value="">
												</div>

												<div class="form-group">
													<label id="confirmPswTip"> 确认密码：</label>
													<input type="password" class="form-control" id="confirmPsw" disabled="disabled" placeholder="更新密码，不填写视为保留原密码" name="confirmPsw" autocomplete="new-password" value="">
												</div>

												<div class="form-group">
													<label for="accountState">状&nbsp;&nbsp;&nbsp;&nbsp;态：</label>
													<input type="text" class="form-control" id="accountState" readonly="readonly" name="accountState">
												</div>
												<div class="form-group">
													<label for="accountIntegral">积&nbsp;&nbsp;&nbsp;&nbsp;分：</label>
													<input type="text" class="form-control" id="accountIntegral" readonly="readonly" name="accountIntegral">
												</div>
												<div class="form-group" id="btn">
													<button type="button" class="btn btn-primary btn2">修改</button>
													<button type="button" class="btn btn-success btn3" id="sub" disabled="disabled">保存</button>
												</div>
											</div>
										</form>
									</div>
									<div class="tab-pane fade p-3" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">

										<div class="container-fluid">
											<div class="container-fluid mt-2">
												<h1>订单中心</h1>
											</div>
											<div class=" container-fluid">

												<table cellspacing="2" cellpadding="4" class="w-100 table table-hover">
													<thead>
														<tr>
															<th>序号</th>
															<th>订单编号</th>
															<th>订单生效时间</th>
															<th>订单价格</th>
															<th>订单状态</th>
															<th>操作</th>
														</tr>
													</thead>
													<tbody id="order">
														<tr>
															<td colspan="6" class="text-center">暂无数据</td>
														</tr>
														<!-- 动态生成 -->
													</tbody>
												</table>
											</div>

										</div>
									</div>
									<div class="tab-pane fade p-3" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
										<div class="container-fluid">
											<div class="container-fluid mt-2">
												<h1>订单详情</h1>
											</div>
											<div class="container-fluid">

												<table cellspacing="2" cellpadding="4" class="w-100 table table-hover">
													<thead>
														<tr>
															<th>序号</th>
															<th>课程名称</th>
															<th>课程售价</th>
															<th>开课时间</th>
															<th>授课老师</th>
															<th>支付类型</th>
														</tr>
													</thead>
													<tbody id="course">
														<tr>
															<td colspan="6" class="text-center">暂无数据</td>
														</tr>
														<!-- 动态生成 -->
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!--<div class="meta">
									<div>
										<a href="#"><span class="ion-android-calendar"></span> May 29, 2018</a>
									</div>
									<div>
										<a href="#"><span class="ion-android-person"></span> Admin</a>
									</div>
									<div>
										<a href="#"><span class="ion-chatbubble"></span> 19</a>
									</div>
								</div>-->
						<!--</div>-->
					</div>
				</div>
			</div>
		</div>
		</div>

		<footer class="site-footer">
			<div class="container">
				<div class="row mb-5">
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3>爱学习</h3>
						<p></p>
					</div>
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">快速链接</h3>
						<div class="row">
							<div class="col-md-6">
								<ul class="list-unstyled">
									<li>
										<a href="index2.jsp">首页</a>
									</li>
									<li>
										<a href="about.jsp">关于我们</a>
									</li>
									<li>
										<a href="courses.jsp">培训班</a>
									</li>

								</ul>
							</div>

						</div>
					</div>

					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">联系信息</h3>
						<div class="block-23">
							<ul>
								<li><span class="icon ion-android-pin"></span><span class="text">大连爱学习总部</span></li>
								<li><span class="icon ion-ios-telephone"></span><span class="text">+2 392 3929 210</span></li>
								<li><span class="icon ion-android-mail"></span><span class="text">865681467@qq.com</span></li>
								<li><span class="icon ion-android-time"></span><span class="text">星期一 &mdash; 星期五 8:00am - 5:00pm</span></li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</footer>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>

		<!--<script src="js/jquery-3.2.1.min.js"></script>-->
		<script src="../WebTools/Bootstrap-4.4.1/js/jquery-3.4.1.js"></script>
		<script src="js/jquery-migrate-3.0.0.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.waypoints.min.js"></script>
		<script src="js/jquery.stellar.min.js"></script>
		<script src="js/jquery.animateNumber.min.js"></script>
		<script src="js/layer/layer.js"></script>

		<script type="text/javascript" src="../WebTools/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
		<script src="js/main.js"></script>
		<script>
			/**渲染订单列表
			 * @param {Object} data
			 */
			function showOrders(data) {
				$("#order").empty();
				if(data.length > 0) {
					$.each(data, function(index) {
						// 定义一个空串
						var newState = "未知";
						// 订单状态
						state = this.order_state;
						switch(this.order_state) {
							case 0:
								newState = "进行中";
								break;
							case 1:
								newState = "完成";
								break;
							case 2:
								newState = "取消";
								break;
							default:
								break;
						}
						// 订单信息动态追加
						$("#order").append("<tr><td>" + index +
							"</td><td><a href='javascript:void(0)' data-order-detail='" + JSON.stringify(this.course_List) + "' onclick='showDetail(this)'>" + this.order_id + "</a>" +
							"</td><td>" + this.order_create_date +
							"</td><td>" + this.order_cost +
							"</td><td>" + newState +
							"</td><td><button type=\"button\" class=\"btn btn-warning exit\" data-orderid=\"" + this.order_id + "\">删除订单</button></td></tr>");

					});
				} else {
					$("#order").append('<tr><td colspan="6" class="text-center">暂无数据</td></tr>');
				}
			}

			/**渲染订单详情列表
			 * @param {Object} obj
			 */
			function showDetail(obj) {
				$("#course").empty();
				if($(obj).data('order-detail').length > 0) {
					$.each($(obj).data('order-detail'), function(index) {
						var newPayType = '未知';
						switch(this.pay_type) {
							case 1:
								newPayType = '仅支付宝';
								break;
							case 2:
								newPayType = '仅积分';
								break;
							case 3:
								newPayType = '支付宝及积分';
								break;
							default:
								break;
						}
						var newTeacherName = '佚名';
						if(this.teacher.teacher_name != null && this.teacher.teacher_name.trim() != '') {
							newTeacherName = this.teacher.teacher_name;
						}
						console.log(this)
						$("#course").append("<tr><td>" + index +
							"</td><td><a target='_blank' href='${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=" + this.course_id + "'>" + this.course_title + "</a>" +
							"</td><td>" + this.course_price +
							"</td><td>" + this.course_create_time +
							"</td><td>" + newTeacherName +
							"</td><td>" + newPayType +
							"</td></tr>");
					});
				} else {
					$("#course").append('<tr><td colspan="6" class="text-center">暂无数据</td></tr>');
				}
				$('#v-pills-messages-tab').click();
			}

			/**删除订单操作
			 * @param {Object} orderId
			 */
			function doDeleteOrder(orderId) {

				// 进行ajax请求
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/AccountPersonalCenterServlet",
					type: "GET",
					data: {
						op: "deleteOrder",
						orderId: orderId
					},
					dataType: "json",
					success: function(result, status, xhr) {
						layer.msg("删除订单成功！");
						showOrders(result);

					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});
			}

			/**
			 * 发送导航条的Tabajax
			 */
			function sendTabListAjax() {
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/TabServlet",
					type: "GET",
					data: {
						op: "getAllTab",
					},
					dataType: "json",
					success: function(result, status, xhr) {
						//清空数据
						$('#tabdiv').empty();
						$.each(result, function(index, tab) {
							if(index < 3) {
								$('#tabdiv').append("<a class=\"dropdown-item\" href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + "</a>");
							}

						});
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}

				});
			}
			/**
			 * 删除订单按钮绑定事件
			 */
			$(document).on("click", ".exit", function() {
				// 获取订单Id
				var orderId = $(this).data("orderid");
				layer.confirm('确定删除订单【' + orderId + '】吗？', {
					time: 0,
					btn: ['确定', '取消'],
					icon: 3,
					yes: function(index) {
						doDeleteOrder(orderId);
					}
				});

			});

			/**
			 * 发送遍历订单的请求
			 */
			function sendOrderViewAjax() {
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/AccountPersonalCenterServlet",
					type: "GET",
					data: {
						op: "orderView",
					},
					dataType: "json",
					success: function(result, status, xhr) {
						showOrders(result);
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});

			}

			/**
			 * 发送获取账户信息的请求
			 */
			function sendViewAccuountAjax() {
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/AccountPersonalCenterServlet",
					type: "GET",
					data: {
						op: "personalCenter",
					},
					dataType: "json",
					success: function(result, status, xhr) {
						loadAccountView(result);
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});
			}

			/**
			 * @param {Object} result
			 */
			function loadAccountView(result) {
				if(result.account_pic == undefined || result.account_pic.trim() == '') {
					$("#img3").prop("src", "images/2.png");
				} else {
					$("#img3").prop("src", "${pageContext.request.contextPath }/FileDownLoadServlet?op=getAccountFace&faceName=" + result.account_pic);
				}
				$("#accountPhone").val(result.account_phone);
				$("#accountName").val(result.account_name);
				$("#accountEmail").val(result.account_email);
				$("#accountState").val(result.account_state == 1 ? "正常" : "封禁");
				$("#accountIntegral").val(result.account_Integral);
				$("#accountId").val(result.account_id);
				$('#img3').css("width", 150);
				$('#img3').css("height", 150);
				$('#img3').css("margin-left", 0);
				$('#img3').css("margin-top", 0);
			}
			/**
			 * 添加修改绑定事件
			 */
			$(".btn2").click(function() {
				// 点击修改之后 去除只读状态
				$("#accountPhone").removeAttr("readonly");
				$("#accountName").removeAttr("readonly");
				$("#accountEmail").removeAttr("readonly");
				$("#accountPsw").removeAttr("readonly");
				// 保存按钮设置可用
				$("#sub").prop("disabled", false);
				$("#file").removeAttr("disabled");

				var email = $("#accountEmail").val();

				$('#accountEmail').blur(function() {
					//获取输入的电子邮件地址
					if($(this).val() != email && $(this).val() != "") {
						var email1 = $(this).val();
						if(email != "") {

							$.ajax({
								async: true,
								url: "${pageContext.request.contextPath}/AccountRegisterServlet",
								type: "GET",
								data: {
									op: "getAccountByemail",
									email: email1
								},
								dataType: "text",
								success: function(result, status, xhr) {

									if(result == "true") { // 电子邮件地址已存在
										$("#emailTip").text("该电子邮件地址已被注册");
										$("#emailTip").attr("class", "error");
										// 保存按钮设置不可用
										$("#sub").prop("disabled", true);
									} else if(result == "false") { // 电子邮件地址不存在
										var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
										if(reg.test(email1)) {
											$("#emailTip").text("电子邮件地址格式正确");
											$("#emailTip").attr("class", "success")
											// 保存按钮设置可用
											$("#sub").prop("disabled", false);
										} else {
											$("#emailTip").text("请填写正确的电子邮件地址");
											$("#emailTip").attr("class", "error");
											// 保存按钮设置不可用
											$("#sub").prop("disabled", true);
										}
									}
								},
								error: function(xhr, status, error) {
									alert("ajax异步请求失败");
								}

							});
						}
					} else if($(this).val() == email) {
						$("#emailTip").text("电子邮箱和原来一样");
						$("#emailTip").attr("class", "success");

						// 保存按钮设置可用
						$("#sub").prop("disabled", false);
					} else {
						// 保存按钮设置可用
						$("#sub").prop("disabled", false);
					}

				});

				// 获取最初的用户名
				var accountName = $("#accountName").val();
				// 对用户名输入框绑定失去焦点事件
				$("#accountName").blur(function() {

					var accountName1 = $(this).val();

					if(accountName1 != accountName) {
						// 获取输入的账号
						if($(this).val() == "") {
							$("#accountNameTip").text("用户名不能为空");
							$("#accountNameTip").attr("class", "error");
							// 保存按钮设置不可用
							$("#sub").prop("disabled", true);
						} else {
							// 发送ajax请求
							$.ajax({
								async: true,
								url: "${pageContext.request.contextPath}/AccountRegisterServlet",
								type: "GET",
								data: {
									op: "existsOfAccountName",
									accountName: accountName1
								},
								dataType: "text",
								success: function(result, status, xhr) {
									if(result == "true") { // 用户名存在
										$("#accountNameTip").text("用户名已存在");
										$("#accountNameTip").attr("class", "error");
										// 保存按钮设置不可用
										$("#sub").prop("disabled", true);
									} else if(result == "false") { // 用户名不存在
										$("#accountNameTip").text("用户名可用");
										$("#accountNameTip").attr("class", "success");
										// 保存按钮设置可用
										$("#sub").prop("disabled", false);
									}
								},
								error: function(xhr, status, error) {
									alert("ajax异步请求失败");
								}
							});
						}
					} else {
						$("#accountNameTip").text("用户名和原来一样");
						$("#accountNameTip").attr("class", "success");

						// 保存按钮设置可用
						$("#sub").prop("disabled", false);
					}

				});

				// 获取最初的电话号
				var accountPhone = $("#accountPhone").val();

				$("#accountPhone").blur(function() {
					if($(this).val().trim() != accountPhone) {
						//获取输入的手机号
						var phone = $(this).val().trim();
						if(phone == "") {
							$("#phoneTip").text("手机号不能为空");
							$("#phoneTip").attr("class", "error");
						} else {
							$.ajax({
								async: true,
								url: "${pageContext.request.contextPath}/AccountRegisterServlet",
								type: "GET",
								data: {
									op: "getAccountByphone",
									phone: phone
								},
								dataType: "text",
								success: function(result, status, xhr) {
									if(result == "true") { // 手机号存在
										$("#phoneTip").text("该手机号已被注册");
										$("#phoneTip").attr("class", "error");
										// 保存按钮设置不可用
										$("#sub").prop("disabled", true);
									} else if(result == "false") { // 手机号不存在
										let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
										if(phoneCodeVerification.test(phone)) {
											$("#phoneTip").text("手机号码格式正确");
											$("#phoneTip").attr("class", "success");
											// 保存按钮设置可用
											$("#sub").prop("disabled", false);
										} else {
											$("#phoneTip").text("请填写正确的手机号码");
											$("#phoneTip").attr("class", "error");
											// 保存按钮设置不可用
											$("#sub").prop("disabled", true);
										}
									}
								},
								error: function(xhr, status, error) {
									alert("ajax异步请求失败");
								}
							});
						}
					} else {
						$("#phoneTip").text("手机号和原来一样");
						$("#phoneTip").attr("class", "success");
						// 保存按钮设置可用
						$("#sub").prop("disabled", false);
					}
				});

			});
			/**
			 * 入口函数
			 */
			$(document).ready(function() {

				if('${sessionScope.accountId}' == null || '${sessionScope.accountId}' == '') {
					layer.msg('请先登录');
					window.location.href = 'login.jsp';
				}
				//发送ajax请求
				sendTabListAjax();
				sendOrderViewAjax();
				sendViewAccuountAjax();
				$('#section-first').css('margin-top', $('header').height());

				$("#sub").click(function() {
					var formData = new FormData($("#subForm")[0]);
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountPersonalCenterServlet?op=viewUpdate",
						type: "POST",
						data: formData,
						processData: false,
						contentType: false,
						dataType: "json",
						success: function(result, status, xhr) {
							loadAccountView(result)
							// 恢复初始状态
							$("#accountPhone").attr("readonly", "readonly");
							$("#accountName").attr("readonly", "readonly");
							$("#accountEmail").attr("readonly", "readonly");
							$("#accountPsw").attr("readonly", "readonly");
							$("#sub").prop("disabled", true);
							$("#file").attr("disabled", "disabled");
							$("#phoneTip").text("手机号：");
							$("#accountNameTip").text("用户名：");
							$("#emailTip").html("邮&nbsp;&nbsp;&nbsp;&nbsp;箱：");
							$("#accountPswTip").text("新密码：");
							$("#confirmPswTip").text("确认密码：");
							$('label').removeClass();
							layer.msg("修改成功");
						},
						error: function(xhr, status, error) {
							layer.msg("请求失败");
						}
					});
				});

				//对密码输入框绑定失去焦点事件
				$('#accountPsw').blur(function() {
					//获取第一个密码输入框的值
					var password = $(this).val().trim();
					var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
					if(password == "") {
						$("#accountPswTip").text("保留原密码");
						$("#accountPswTip").attr("class", "success");

						$("#sub").prop("disabled", false);
					} else if(reg.test(password)) {
						$("#accountPswTip").text("密码格式正确，请再次确认密码");
						$("#accountPswTip").attr("class", "success")
						// 保存按钮设置不可用
						$("#sub").prop("disabled", true);
						//确认密码输入框设置可用
						$('#confirmPsw').prop("disabled", false);
					} else {
						$("#accountPswTip").text("请填写正确的密码格式");
						$("#accountPswTip").attr("class", "error");
						// 保存按钮设置不可用
						$("#sub").prop("disabled", true);
						//确认密码输入框设置不可用
						$('#confirmPsw').prop("disabled", true);
					}
				});

				//对确认密码输入框绑定失去焦点事件
				$('#confirmPsw').blur(function() {
					//获取第一个密码输入框的值
					var accountPsw = $('#accountPsw').val().trim();
					//获取第二个密码输入框的值
					var confirmPsw = $(this).val().trim();
					if(accountPsw == confirmPsw) {
						$("#confirmPswTip").text("密码正确");
						$("#confirmPswTip").attr("class", "success");
						// 保存按钮设置可用
						$("#sub").prop("disabled", false);
					} else {
						$("#confirmPswTip").text("两次密码不一致，请重新填写");
						$("#confirmPswTip").attr("class", "error");
						// 保存按钮设置不可用
						$("#sub").prop("disabled", true);
					}
				});

			});

			function setImagePriview() {
				// 得到文件列表数组,获取数组中的第一个文件
				var file = document.getElementById("file").files[0];
				// 没有选择文件
				if(file == null) {
					$("#sub").prop("disabled", false);
					document.getElementById("img3").src = "images/2.png";
				} else {
					// 构建一个文件渲染对象
					var reads = new FileReader();
					// FileReader.readAsDataURL 读取指定Blob或File的内容
					reads.readAsDataURL(file);
					// 获取文件数据
					reads.onload = function() {
						// 显示图片
						document.getElementById("img3").src = this.result;
						$('#cutImgPanel').html("");
						$('#cutImgPanel').append('<img src="' + this.result + '" id="cutImg" class="mx-auto" style="height: auto;width: auto; max-width: 100%;max-height: 100%; " />');
						$('#cutImgPanel').append('<button type="button" class="btn btn-primary mt-3" onclick="emptyPic()">确定</button>');
						$("#sub").prop("disabled", true);
						iniJcrop();
					}
				}

			}

			function emptyPic() {
				$('#cutImgPanel').empty();
				$("#sub").prop("disabled", false);

			}

			function iniJcrop() {
				$('#cutImg').Jcrop({
					addClass: 'jrcopfit',
					onChange: Addparams,
					onSelect: Addparams,
					aspectRatio: 1
				});
			}

			function Addparams(coords) {
				//					console.log(coords)
				//					console.log($('.cutImgPanel img').css('width'))
				//					console.log($('.cutImgPanel img').css('height'))
				$('#pic-x').val(coords.x);
				$('#pic-y').val(coords.y);
				$('#destWidth').val(coords.w);
				$('#destHeight').val(coords.h);
				$('#finalWidth').val($('#cutImgPanel img').css('width').replace(/px/g, ''));
				$('#finalHeight').val($('#cutImgPanel img').css('height').replace(/px/g, ''));
				fixImg(coords);
			}

			function fixImg(coords) {

				//			console.log(($('#cutImg').width() * 100) / coords.w);
				//			console.log(($('#cutImg').height() * 100) / coords.h);
				$('#img3').css("width", ($('#cutImg').width() * 150) / coords.w);
				$('#img3').css("height", ($('#cutImg').height() * 150) / coords.h);
				$('#img3').css("margin-left", -((150 * coords.x) / coords.w));
				$('#img3').css("margin-top", -((150 * coords.y) / coords.h));

			}
		</script>
	</body>

</html>